<template>
  <div id="app">
      <Child :title="msg" @child-click="handlerChildClick"/>
      <ToDoList  v-on:add-List="addList" @remove-all="removeAll" />
     <div class="box">
      <h2>这里是待办清单</h2>
      <ul v-for="(item,index) in listData" :key="index">
        <li>{{index+1}}--{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { ref } from "vue";
  // 1引入
  import Child from "./components/Child.vue"
  import ToDoList from "./components/ToDoList.vue"
  export default {
    components: {Child, ToDoList}, // 2注册
    setup() {
      const msg=ref("我是父组件的值");
      const listData = ref([]);
      const handlerChildClick=(msg)=>{
        alert(msg);
      }
      const addList =(value)=>{
        console.log(value);
        listData.value.push(value);
      }
      const removeAll=()=>{
        listData.value = [];
      }
      return {
        msg,
        addList,
        removeAll,
        listData,
        handlerChildClick
      };
    }
  };
</script>
<style>
  .box {
    width:500px;
    height:500px;
    background-color: gray;
    margin: 0auto;
  }
</style>